import React, { ReactNode, useEffect } from 'react';
import classNames from 'classnames';
import styles from './css/index.module.css';
import IconSend from '@/components/Icons/IconSend';
import IconFile from '@/components/Icons/IconFile';

interface inputProps
  extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
  className?: string;
  extra?: ReactNode;
  errorMsg?: string;
  value?: string;
}

const Input: React.FC<inputProps> = ({ className, extra, errorMsg, value, onKeyDown, ...rest }) => {
  // Focus事件监听
  useEffect(() => {
    const outerDiv = document.getElementById('areaApp');
    const textArea = document.getElementById('text') as HTMLDivElement;

    // 为 div 添加点击事件监听器
    outerDiv?.addEventListener('click', () => {
      textArea?.focus();
      // 改变 div 的边框颜色
      outerDiv.classList.add('border-sky-500');
    });

    // 监听 textarea 失去焦点的事件
    textArea?.addEventListener('blur', () => {
      // 恢复 div 的原始边框颜色
      outerDiv?.classList.remove('border-sky-500');
    });

    // 清理事件监听器
    return () => {
      outerDiv?.removeEventListener('click', () => {});
      textArea?.removeEventListener('blur', () => {});
    };
  }, []);

  return (
    <div
      id="areaApp"
      className={classNames(
        'flex items-center w-3/4 h-2/5 mx-auto rounded-lg border hover:border-sky-500 bg-white px-1',
        className,
      )}
    >
      <IconFile />
      <textarea
        {...rest}
        id="text"
        className={classNames('w-full h-full mx-1 ', styles.text)}
        style={{ resize: 'none', outline: 'none', fontSize: '16px' }}
        rows={1}
        placeholder={'send you message'}
        value={value}
        onKeyDown={onKeyDown}
      />
      <IconSend />
    </div>
  );
};

export default Input;
